<template>
  <div>
    <el-row class="head" :gutter="12">
      <el-col :span="8">
        <el-card shadow="always">
          <span>{{ optinos.view_count }}</span>
          <p>浏览数</p>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="always">
          <span>{{ optinos.order_count }}</span>
          <p>订单数<span style="float: right;">线下订单：{{ optinos.offline_order_count }}</span><span style="float: right;margin-right: 15px;">线上订单：{{ optinos.online_order_count }}</span></p>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="always">
          <span>￥{{ optinos.order_amount }}</span>
          <p>订单额</p>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>

export default {
  props: {
    row: {
      type: Object,
      default: _ => {
        return {};
      }
    }
  },
  data() {
    return {
      optinos: {
        view_count: 0,
        order_count: 0,
        online_order_count: 0,
        offline_order_count: 0,
        order_amount: 0
      }
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    loadData() {
      this.$http.post(
          '/course/admin/agent/school/' + this.$route.params.id + '/statistic',
          {},
          response => {
            this.optinos = response.data;
          },
          _ => {},
          false
      );
    }
  }
};
</script>

<style lang="scss" scoped>
.head {
  width: 99%;
  margin-bottom: 20px;
  padding-left: 20px;
}
</style>
